<template>
  <div class="topic-root">
    <div class="title">主题情报-南海纷争</div>
    <NavBtns></NavBtns>
    <TextBlock class="block n1" :class="{hide: zoomin > 0}"></TextBlock>
    <Lblock :data="block2" class="block n2" :class="{hide: zoomin > 0}"></Lblock>
    <PersonBlock class="block n3" :class="{hide: zoomin > 0}"></PersonBlock>
    <TagCloudBlock class="block n4" :class="{hide: zoomin > 0}"></TagCloudBlock>
    <MapBlock class="block n5" 
      :class="{hide: zoomin > 0 && zoomin != 5, zoomin: zoomin == 5}"
      :zoomin="zoomin == 5" @zoomin="zoomin = 5" @zoomout="zoomin = 0">
    </MapBlock>
    <TimeLineBlock class="block n6" 
      :class="{hide: zoomin > 0 && zoomin != 6, zoomin: zoomin == 6}"
      :zoomin="zoomin == 6" @zoomin="zoomin = 6" @zoomout="zoomin = 0">
    </TimeLineBlock>
  </div>
</template>

<script>
import Lblock from './Lblock'
import TextBlock from './TextBlock'
import PersonBlock from './PersonBlock'
import TagCloudBlock from './TagCloudBlock'
import MapBlock from './MapBlock'
import TimeLineBlock from './TimeLineBlock'
import NavBtns from '../common/NavBtns'

export default {
  name: 'topic',
  components: {Lblock, TextBlock, PersonBlock, TagCloudBlock, MapBlock, TimeLineBlock, NavBtns},
  data(){
    return {
      block2: [],
      zoomin: 0
    }
  },
  mounted(){
    fetch('/static/data-topiclist.json').then(r=>r.json()).then(data=>{
      this.block2 = data;
    })
  }
}
</script>

<style scoped lang="stylus">
.block
  position absolute
  width 538px
  background rgba(0,0,0,.3)
  top 108px
  left 35px
  right 38.4px
  bottom 50px
  box-sizing border-box
  &.n1
    right auto
    bottom auto
    height 334px
  &.n2
    right auto
    top auto
    height 495px
  &.n3
    height 590px
    left auto
    bottom auto
  &.n4
    height 240px
    left auto
    top auto
  &.n5
    height 600px
    width 749px
    left 584px
    bottom auto
    right auto
    background none
  &.n6
    height 240px
    left 584px
    width 749px
    right auto
    top auto
  &.hide
    display none
  &.zoomin
    top 130px
    left 320px
    right 320px
    bottom 125px
    height auto
    width auto
    
</style>